<template>
	<view class="gy-timeline-item">
		<view class="left" :style="{color: props.iconColor}">
			<view class="icon" :class="props.icon"></view>
			<view v-if="line" class="line"></view>
		</view>
		<view class="right">
			<view v-if="props.placement === 'top' && props.timestamp" class="timestamp top">{{ props.timestamp }}</view>
			<view class="content" :style="{paddingTop: props.placement === 'bottom' ? '5rpx' : 0}">
				<slot></slot>
			</view>
			<view v-if="props.placement === 'bottom' && props.timestamp" class="timestamp bottom">{{ props.timestamp }}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	import {
		ref
	} from "vue";
	
    const props = defineProps({
    	icon: {
    		type: String,
    		default: "gy_icon_positionings"
    	},
    	iconColor: {
    		type: String,
    		default: "#999999"
    	},
    	timestamp: {
    		type: String
    	},
    	placement: {
    		type: String,
    		default: "top"
    	}
    });
	
	const line = ref(false);
	
	defineExpose({
		setLineFn: () => {
			line.value = true;
		}
	});
	
</script>

<style lang="scss" scoped>
	.gy-timeline-item{
	    display: flex;
	    width: 100%;
	    padding: 12rpx 0 15rpx 0;
	    .left{
	        display: inline-block;
	        vertical-align: top;
	        width: 50rpx;
	        position: relative;
	        .icon{
	            width: 40rpx;
	            height: 40rpx;
	            display: flex;
	            justify-content: center;
	            align-items: center;
	            font-size: 40rpx;
	        }
	        .line{
	            position: absolute;
	            top: 45rpx;
	            left: 18rpx;
	            height: calc(100% - 25rpx);
	            border-left: 4rpx dashed var(--gy-border-color);
	        }
	    }
	    .right{
	        display: inline-block;
	        vertical-align: top;
	        width: calc(100% - 50rpx);
	        .content{
	            color: #333333;
	            font-size: 32rpx;
	            line-height: 38rpx;
	            white-space: normal;
	            padding-bottom: 30rpx;
	        }
	        .timestamp{
	            color: #666666;
	            font-size: 36rpx;
	            line-height: 40rpx;
	            white-space: normal;
	        }
	        .top{
	            padding-bottom: 10rpx;
	        }
	        .bottom{
	            padding-top: 15rpx;
	        }
	    }
	}
	
</style>